<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-input
          size="small"
          style="width: 200px;"
          v-model="queryParams.keyword"
          :placeholder="$t('common.搜索 仓库/运营账号名')"
          @keyup.enter.native="changeOption(true)"
          clearable @clear="changeOption(false, 'clear')"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption(true)">{{ $t('common.search') }}</el-button>
      </div>
      <div class="right">
        <el-button type="primary" @click="jumpInfo()">{{$t('setting.添加大仓库')}}</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="loading"
        :data="data"
        border
      >
        <el-table-column
          prop="warehouseName"
          :label="$t('table.大仓库名')"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="goodsSizeStickerPrice"
          :label="$t('table.一件代发（元）')"
          min-width="150"
          align="center"
          v-if="false"
        >
          <template v-slot="{row}">
            <el-tooltip class="item" effect="dark"  placement="top">
              <template #content>
                <div
                  v-for="priceItem in row.goodsSizeStickerPrice"
                  :key="priceItem.weight"
                >
                  <template v-if="priceItem.type === 'num'">
                    {{$t('数量')}}: {{$t('setting.≥重量kg，首件：price1 续件：price2',{weight: priceItem.weight,price1: priceItem.PSCFirst, price2: priceItem.PSCAppend})}}
                  </template>
                  <template v-else>
                    {{$t('重量')}}: {{$t('setting.≥重量kg，首件：price1',{weight: priceItem.weight,price1: priceItem.weightFirst})}}
                  </template>
                </div>
              </template>
              <div>
                {{$t('setting.N个重量段',{num: row.goodsSizeStickerPrice.length})}}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="logisticTypePrice"
          :label="$t('table.特殊快递（元/单）')"
          align="center"
          min-width="150"
          v-if="false"
        >
          <template v-slot="{row}">
            <div>{{ $t('order.express') }}：{{row.logisticTypePrice.drop_off}}</div>
            <div>Flex：{{row.logisticTypePrice.self_service}}</div>
            <div>Colecta：{{row.logisticTypePrice.cross_docking}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="packageMaterialSetting"
          :label="$t('table.包装服务（元/个）')"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.packageMaterialSetting.length === 0">-</template>
            <template v-else>
              <div
                v-for="item in row.packageMaterialSetting"
                :key="item.id"
              >
                {{item.name}}: {{item.price}}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="accountNum"
          :label="$t('table.有效店铺/用户数')"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{row.accountNum}} / {{row.userNum}}
          </template>
        </el-table-column>
        <el-table-column
          prop="adminList"
          :label="$t('table.运营')"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            <template v-if="row.adminList.length === 0">
              {{ $t('setting.N个',{num: 0}) }}
            </template>
            <template v-else-if="row.adminList.length === 1">
              {{row.adminList[0].account}}
            </template>
            <template v-else>

              <el-tooltip class="item" effect="dark"  placement="top">
                <template #content>
                  <div
                    v-for="item in row.adminList"
                    :key="item.id"
                  >
                    {{ item.account }}
                  </div>
                </template>
                <div>
                  {{ $t('setting.N个',{num: row.adminList.length}) }}
                </div>
              </el-tooltip>

            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          :label="$t('table.createTime3')"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="operate"
          :label="$t('table.operate')"
          align="left"
          min-width="150"
        >
          <template v-slot="{row}">
            <el-button type="primary" @click="jumpInfo(row)">{{$t('common.edit')}}</el-button>
            <el-button type="danger" @click="delRow(row)" :loading="delLoading" v-if="row.adminList.length === 0">{{$t('common.delete')}}</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="font-grey f13 mgt10">
        <span>{{$t('大仓库是指由代发仓、中转仓等组成的一整套仓库体系，不是单独意义上的代发仓、中转仓等；')}}</span>
        <br>
        <span>{{ $t('一个运营账号只能绑定在一个大仓库体系下') }}</span>

      </div>
      <div>

      </div>

      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {delWarehouse, getWarehouseList} from "@/api/warehouse";
import adminList from "../admin/adminList.vue";
import {mapGetters} from "vuex";
import {getUpToDateLog} from "@/api/helpDocument";
import {editMasterLogShow, getInfo, getIsShowLog} from "@/api/user";
export default {
  name: 'warehouseList',
  computed: {
    adminList() {
      return adminList
    },

  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        keyword: '',
      },
      total: 0,
      data: [], // 表格数据
      warehouseForm: {}, // 仓库表单
      loading: false,
      delLoading: false,

    }
  },
  created() {
    this.getData()

  },
  methods:{

    getData(){
      this.loading = true
      getWarehouseList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData();
    },
    jumpInfo(row = null){
      if(row){
        this.$router.push({
          name: 'editWarehouse',
          query: {
            id: row.id
          }
        })
      }else{
        this.$router.push({
          name: 'addWarehouse'
        })
      }

    },
    delRow(row){
      this.$warning( '',{
        title: this.$t('setting.删除当前仓库？'),
      })
        .then(()=>{
          this.delLoading = true
          delWarehouse(row.id)
            .then(res=>{
              this.delLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{

        })
    }
  }
}

</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }

}

</style>

